<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>订水</title>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="./fonts/font_tabbar/iconfont.css"/>
    <link rel="stylesheet" href="./css/public.css?v=20181211" />
    <link rel="stylesheet" href="css/member-ticket.css?v=20181211" />
    <link rel="stylesheet" href="css/water-index.css?v=20180920"/>
    <link rel="stylesheet" href="./css/cxvalidation.css">
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src='./js/jquery-3.2.1.min.js'></script>
    <script src="./js/mui.min.js"></script>
    <!--<script src="./js/mui.js"></script>-->
    <script src="./js/art-template.js"></script>
    <script src="./js/cxvalidation.js"></script>
    <script src="./js/config.js?v=20181211"></script>
</head>
<body>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    <!--侧滑菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-right">
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
            <div class="mui-scroll" style="padding: 0.5rem">
                <!--地址列表-->
                <div id="address_list_content">

                </div>
            </div>
        </div>
    </aside>
    <!--主界面部分-->
    <div class="mui-inner-wrap">
        <header class="mui-bar mui-bar-nav header_change_color">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#fff;"></a>
            <h1 class="mui-title" style="color:#fff;">一键订水</h1>
        </header>
        <form action="" id="orderForm">
            <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper" style="margin-bottom: 4rem;margin-top: 2.5rem">
                <div class="mui-scroll">
                    <div class='mui-content' >

                        <div style="position: relative" >
                            <div class="mui-slider" id="slider_img_content">

                            </div>
                            <img class="left_img" src="image/left.png" style="width: 2rem;height: 2rem;position: absolute;top: 4rem;left: 1rem;z-index: 100;">
                            <img class="right_img" src="image/right.png" style="width: 2rem;height: 2rem;position: absolute;top: 4rem;right: 1rem;z-index: 100">
                        </div>
                        <!--计算加减-->

                        <div class="mui-numbox" id="data-num" data-numbox-min='1' style="display: flex;display:-webkit-flex;background-color: #fff;">
                            <!-- "-"按钮，点击可减小当前数值 -->
                            <button id='min-button'  class=" mui-btn mui-numbox-btn-minus" type="button">-</button>
                            <input id='mui-numbox-input' style="border-left: none!important;border-right: none!important;" class=" mui-numbox-input" type="number" value="1" />
                            <!-- "+"按钮，点击可增大当前数值 -->
                            <button id='max-button' class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                        </div>

                        <!--收货地址-->
                        <div id="address_new" style="display: flex;display: -webkit-flex">
                            <div class='mui-action-menu add-address has_address' style="background: #fff;padding: 0.5rem 0;" id="address_content">

                                <!--无地址时-->
                            </div>
                        </div>
                        <div class="payType">
                            <div class="payLeft">
                                支付方式
                            </div>
                            <div class="payRight">

                                <p class="choosePayType" paytype = '2'>
                                    <input id="item2" type="radio" name="item" value="2" checked>
                                    <label for="item2"></label>
                                    <span>水票支付</span>
                                </p>
                                <p class="choosePayType" paytype = '1'>
                                    <input id="item1" type="radio" name="item" value="1" checked>
                                    <label for="item1"></label>
                                    <span>微信支付</span>
                                </p>
                                <!--<p class="choosePayType" paytype = '1'>-->
                                    <!--<input id="item1" type="radio" name="item" value="1" checked>-->
                                    <!--<label for="item1"></label>-->
                                    <!--<span>货到付款</span>-->
                                <!--</p>-->
                            </div>
                        </div>

                        <div class="totalPrice" style="padding: 0 0.5rem;display: none;">合计支付：<em id="totalPrice" style="color: red;font-size: 1rem"></em>元</div>
                        <!--备注-->
                        <div class="remark-input" style="margin: 0.7rem 0 1rem 0;">
                            <input id='remark-input' type="text" class="mui-input-clear" placeholder="有特殊要求请在这里备注">
                            <!--<textarea style="font-size: 14px;line-height: 30px;overflow: hidden;" id='remark-input' type="text" class="mui-input-clear" placeholder="有特殊要求请在这里备注"></textarea>-->
                        </div>
                        <div style="width: 100%" id="empty_div"></div>
                        <div class="bac_rgba none"></div>

                        <!--各要传数据的隐藏域-->
                        <input type="hidden" id="tickt_id">
                    </div>
                    <input type="hidden" id="slideNumbers" value="0">
                </div>
            </div>
            <!--确认订水-->
            <div class='sure-submit' style="z-index: 1">  <!--sure-submit-->
                <!--//是否首次购买-->
                <!--<input type="hidden" name="current_rest_num" id="current_rest_num" data-validation="call[is_rest_num]"/>-->
                <input type="hidden" name="current_rest_num" id="current_rest_num"/>
                <!--校验是否超出配送数量-->
                <input type="hidden" name="current_buy_num" id="current_buy_num" />  <!--data-validation="call[is_buy_num]"-->
                <!--//水票-->

                <input type="hidden" name="id" id="id"> <!--id:id-->
                <input type="hidden" name="num" id="num">
                <!--<input type="hidden" name="description" id="description">-->

                <input type="hidden" name="type" id="type" value="0">
                <input type="hidden" name="goods_ids[]" id="goods_ids">
                <input type="hidden" name="goods_nums[]" id="goods_nums" >
                <input type="hidden" name="order_amount" id="order_amount">
                <button id='button' type="submit">确定订水</button>
                <!--<button type="submit" id='button' class="check-out ok jiesuan" style="">结算</button>-->
            </div>
        </form>
        <!-- off-canvas backdrop -->
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
<script src='js/commen.js?v=20181211'></script>
<!--<script src="./js/take-water-detail.js?v=20181211"></script>-->
<script src="./js/water-index.js?v=20181211"></script>
<!--轮播图-->
<script type="text/html" id="slider_img">
    <div class="mui-slider-group">
        <!--内容区容器-->
        {{each data bill}}
        <div class="mui-slider-item">
            <img class="slide-image" src="{{bill.goods_img}}" alt="" />
            <p>{{bill.goods_name}} {{bill.id}}</p>
            <div class="pay_type">
                <div class="wt_pay" style="display: flex;display:-webkit-flex;justify-content: center;-webkit-justify-content: center">
                    <p style="color:red;">余票 ：<span id="bill_num">{{bill.bill_info.rest_num>0?bill.bill_info.rest_num:0}}</span> 桶</p>
                    <!--{{if bill.bill_info.length<=0 || bill.bill_info.rest_num <= 0}}-->
                    <p class='toBuy' style="padding-left: 1rem;color: #25BDEF" data-id="bill.goods_id"> 点击购买> </p>
                    <!--{{/if}}-->
                </div>

                <div class="wx_pay">
                    <p>价格：<span style="color:red;" > {{bill.goods_price}}</span>元</p>  <!--{{bill.money}}-->
                </div>
            </div>
        </div>
        {{/each}}
    </div>
</script>

<!--收货地址-->
<script type="text/html" id="address">
    {{each address_list address}}
    {{if address.is_default == 1}}
    <div class="nctouch-cart-add-default" style="padding: 0.1px;">
        <div class="show_zhezhao "  style="float: left;width: 85%">
            <div style="display: flex;display:-webkit-flex;justify-content: space-between;-webkit-justify-content:space-between">
                <p style="width: 90%">收货人：
                    <span class='about-name-new'>{{address.name}}</span>
                    <span class="about_mobile" style="margin-left: 0.5rem">{{address.mobile}}</span>
                </p>
            </div>
            <input type="hidden" name="buyer_name"  value="{{address.name}}" >
            <input type="hidden" name="mobile" value="{{address.mobile}}">
            <input type="hidden" name="buyer_address" value="{{address.area_info}}{{address.position_address}} {{address.address}}">
            <p>收货地址：<span id="address_detail"></span></p>
        </div>
        <img class="show_zhezhao"  style="width: 1rem;height: 1rem;margin-top: 1.3rem;float: right" src="image/right.png">
    </div>
    {{/if}}
    {{/each}}
</script>

<!--地址列表-->
<script type="text/html" id="address_list">
    {{each address_list address}}
    <div id="{{address.id}}" class='list_ocntent' style="border-bottom: 1px solid #f1f1f1;margin-bottom: 0.5rem;padding-bottom: 0.5rem;
                                                        display: flex;align-items: center;justify-content: center; display: -webkit-flex;-webkit-align-items: center;-webkit-justify-content: center">
        <div style="width: 90%;position: relative" class="ad_list">
            <p style="color: #fff"><span class=''>收货人：{{address.name}}</span> </p>
            <p style="color: #fff"><span>电话：{{address.mobile}}</span></p>
            <p style="color: #fff" class="" >收货地址：{{address.area_info}}{{address.position_address}} {{address.address}}</p>

            <p class="choosed choosed{{address.id}}" style="position: absolute;top: -0.8rem;right:-1rem;width: 2rem;height: 2rem;background: #25bdef">
                <span style="color: #fff;font-size: 0.5rem;margin-left: 0.3rem">默认</span>
                <span class="sanjiao_down"></span>
            </p>
        </div>
    </div>
    {{/each}}
</script>
<script>
    mui.init();
    //侧滑容器父节点
    var offCanvasWrapper = mui('#offCanvasWrapper');
    //主界面容器
    var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
    //菜单容器
    var offCanvasSide = document.getElementById("offCanvasSide");
    if (!mui.os.android) {
        document.getElementById("move-togger").classList.remove('mui-hidden');
        var spans = document.querySelectorAll('.android-only');
        for (var i = 0, len = spans.length; i < len; i++) {
            spans[i].style.display = "none";
        }
    }
    //移动效果是否为整体移动
    var moveTogether = false;
    //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
    var classList = offCanvasWrapper[0].classList;
    //变换侧滑动画移动效果；
    mui('.mui-input-group').on('change', 'input', function() {
        if (this.checked) {
            offCanvasSide.classList.remove('mui-transitioning');
            offCanvasSide.setAttribute('style', '');
            classList.remove('mui-slide-in');
            classList.remove('mui-scalable');
            switch (this.value) {
                case 'main-move':
                    if (moveTogether) {
                        //仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
                        offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
                    }
                    break;
                case 'main-move-scalable':
                    if (moveTogether) {
                        //仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
                        offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
                    }
                    classList.add('mui-scalable');
                    break;
                case 'menu-move':
                    classList.add('mui-slide-in');
                    break;
                case 'all-move':
                    moveTogether = true;
                    //整体滑动时，侧滑菜单在inner-wrap内
                    offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
                    break;
            }
            offCanvasWrapper.offCanvas().refresh();
        }
    });

    //实现ios平台原生侧滑关闭页面；
    if (mui.os.plus && mui.os.ios) {
        mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
            plus.webview.currentWebview().setStyle({
                'popGesture': 'none'
            });
        });
    }
</script>
</body>

</html>